<template>
  <div class="detail">
    <div class="detail-top">
      <img class="detail-logo" :src="dtlogourl" />
      <div class="detail-title">{{obj.title}}</div>
    </div>
    <div class="detail-center">
      <div class="detail-center-box" v-show="false">
        <div class="detail-center-box-top">
          <div class="detail-center-box-top-left">内含专辑</div>
          <!-- <div class="detail-center-box-top-right">5个专辑，共137个故事</div> -->
        </div>
        <div class="detail-center-box-bottom">
          <!-- <div class="detail-center-box-bottom-item" v-for="item in ZJList ">
            <div class="detail-center-box-bottom-item-img">
              <img :src="item.imgrul" />
            </div>
            <div class="detail-center-box-bottom-item-title">{{item.title}}</div>
            <div class="detail-center-box-bottom-item-money">{{item.money}}</div>
          </div>-->
        </div>
        <div class="slide-box">
          <div class="slide-item" v-for="item in ZJList ">
            <div>
              <img :src="item.cover[0].url" />
            </div>
            <div class="slide-item-title">{{item.title}}</div>
            <div class="slide-item-money">{{item.money}}&nbsp; 元</div>
          </div>
        </div>
      </div>
      <div class="detail-center-select">
        <div
          class="detail-center-select-left"
          :class="{'detail-center-select-left-click': !SwitchXQGS}"
          @click="ChangeXQHS"
        >详情</div>
        <div
          class="detail-center-select-right"
          :class="{'detail-center-select-left-click': SwitchXQGS}"
          @click="ChangeXQHS"
        >故事</div>
        <!-- <&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div class="detail-center-select-num">137</&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div> -->
      </div>
      <div class="detail-center-xq" v-show="!SwitchXQGS" v-html="dthtml"></div>
      <div class="detail-center-gs" v-show="SwitchXQGS">
        <div class="detail-center-gs-box" v-for="item in ZJList ">
          <!-- <div class="detail-center-gs-box-left">{{item.title}}</div> -->
          <!-- <div class="detail-center-gs-box-right">
            33集
            <img />
          </div>-->
          <div class="detail-center-gs-box-list" v-for="t in item.sound" @click="listenAudio(t)">
            <div class="detail-center-gs-box-list-left">
              <img style="width:60px;height:60px" :src="t.cover[0].url" />
            </div>
            <div class="detail-center-gs-box-list-center">
              <div class="detail-center-gs-box-list-center-title">{{t.title}}</div>
              <!-- <div class="detail-center-gs-box-list-center-title2">{{t.subtitle}}</div> -->
              <!-- <div class="detail-center-gs-box-list-center-time">时长-播放量-评论</div> -->
            </div>
            <div class="detail-center-gs-box-list-right">
              <img
                style="widht:40px;height:40px;line-height:70px;margin-top:15px;"
                src="../../common/image/play.png"
              />
              <!-- <div>试听-播放</div> -->
            </div>
          </div>
        </div>
      </div>
      <div style="width:100%;height:180px;"></div>
    </div>
    <!-- <div class="detail-bottom" @click="shiting">
      免费试听
       <div class="detail-bottom-left" @click="shiting">试听</div>
      <div class="detail-bottom-right" @click="OpenPayBtn">0元购买</div>
    </div>-->
    <div class="detail-pay" v-show="ShowPaybtn" @touchmove.prevent>
      <div class="detail-pay-top" @click="ClosePayBtn"></div>
      <div class="detail-pay-bottom">
        <div class="detail-pay-bottom-title">
          <div class="detail-pay-close" @click="ClosePayBtn">X</div>
          <div class="detail-pay-name">商品名称</div>
        </div>
        <div class="detail-pay-bottom-money">
          <div class="left">商品价格</div>
          <div class="right">0.00元</div>
        </div>
        <div class="detail-pay-bottom-paybtn">确认付款&nbsp;0.00元</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      dtlogourl: "",
      dttitle: "",
      dthtml: "",
      indexNum: -1,
      obj: null,
      pid: null,
      ZJList: [],
      listred: [],
      ShowPaybtn: false, //显示支付遮罩开关
      SwitchXQGS: false, //详情故事开关
      testMp3: [
        // {
        //   album: "叶惠美",
        //   duration: 333,
        //   id: 97773,
        //   image:
        //     "https://y.gtimg.cn/music/photo_new/T002R300x300M000000MkMni19ClKG.jpg?max_age=2592000",
        //   lyric:
        //     "[ti:晴天]↵[ar:周杰伦]↵[al:叶惠美]↵[by:]↵[offset:0]↵[00:00.00]晴天 - 周杰伦 (Jay Chou)↵[00:07.31]词：周杰伦↵[00:14.63]曲：周杰伦↵[00:21.94]编曲：周杰伦↵[00:29.26]故事的小黄花↵[00:32.71]从出生那年就飘着↵[00:36.24]童年的荡秋千↵[00:39.75]随记忆一直晃到现在↵[00:42.91]Re So So Si Do Si La ↵[00:45.93]So La Si Si Si Si La Si La So ↵[00:49.87]吹着前奏望着天空↵[00:53.20]我想起花瓣试着掉落↵[00:56.72]为你翘课的那一天↵[00:58.83]花落的那一天↵[01:00.60]教室的那一间↵[01:02.32]我怎么看不见↵[01:04.12]消失的下雨天↵[01:05.81]我好想再淋一遍↵[01:09.99]没想到失去的勇气我还留着↵[01:16.12]好想再问一遍↵[01:17.97]你会等待还是离开↵[01:24.91]刮风这天我试过握着你手↵[01:30.45]但偏偏雨渐渐大到我看你不见↵[01:38.88]还要多久我才能在你身边↵[01:45.44]等到放晴的那天也许我会比较好一点↵[01:52.87]从前从前有个人爱你很久↵[01:58.54]但偏偏风渐渐把距离吹得好远↵[02:06.94]好不容易又能再多爱一天↵[02:13.50]但故事的最后你好像还是说了拜拜↵[02:34.90]为你翘课的那一天↵[02:36.88]花落的那一天↵[02:38.66]教室的那一间↵[02:40.39]我怎么看不见↵[02:42.15]消失的下雨天↵[02:43.87]我好想再淋一遍↵[02:48.00]没想到失去的勇气我还留着↵[02:54.15]好想再问一遍↵[02:56.03]你会等待还是离开↵[03:02.92]刮风这天我试过握着你手↵[03:08.49]但偏偏雨渐渐大到我看你不见↵[03:16.94]还要多久我才能在你身边↵[03:23.43]等到放晴的那天也许我会比较好一点↵[03:30.87]从前从前有个人爱你很久↵[03:37.14]偏偏风渐渐把距离吹得好远↵[03:44.88]好不容易又能再多爱一天↵[03:51.42]但故事的最后你好像还是说了拜拜↵[03:58.49]刮风这天我试过握着你手↵[04:01.97]但偏偏雨渐渐大到我看你不见↵[04:05.65]还要多久我才能够在你身边↵[04:09.07]等到放晴那天也许我会比较好一点↵[04:12.92]从前从前有个人爱你很久↵[04:15.91]但偏偏雨渐渐把距离吹得好远↵[04:19.38]好不容易又能再多爱一天↵[04:22.86]但故事的最后你好像还是说了拜",
        //   mid: "0039MnYb0qxYhV",
        //   name: "晴天",
        //   singer: "周杰伦",
        //   url:
        //     "http://storage.jnaw.top/2019/04/11/187e537c-142c-491f-946c-fb81ae7189a9.mp3"
        // }
      ]
    };
  },
  watch: {
    $route(to, from) {
      const that = this;
      if (to.path == "/StoryDetail") {
        var _this = this;
        _this.discList = [];
        if (_this.pid != this.$route.params.obj.id) {
          _this.obj = this.$route.params.obj;

          _this.pid = this.$route.params.obj.id;

          console.log("该刷新了" + _this.pid);
          const url = "http://www.shizilaoba.com/lion/article/list"; //调用自定义的接口
          const data = Object.assign(
            {},
            {
              filter: [{ pid: _this.pid }]
            }
          );
          axios.post(url, data).then(res => {
            _this.discList = res.data.data;
            console.log(_this.discList);
            _this.dttitle = res.data.data[0].title;
            _this.dthtml = res.data.data[0].content;
            _this.dtlogourl = res.data.data[0].cover[0].url;
            _this.ZJList = _this.discList;
            _this.getAllStory();
            _this.SwitchXQGS = false;
            //return Promise.resolve(res.data); //es6新语法，返回一个以给定值解析后的Promise对象
          });
        }
      }
    }
  },
  created() {
    console.log("11111111111111222");
    console.log(this.$route.params);
    this.pid = this.$route.params.obj.id;
    this.obj = this.$route.params.obj;
    this.discList = [];
    const url = "http://www.shizilaoba.com/lion/article/list"; //调用自定义的接口
    const data = Object.assign(
      {},
      {
        filter: [{ pid: this.pid }]
      }
    );
    axios.post(url, data).then(res => {
      this.discList = res.data.data;
      this.dttitle = res.data.data[0].title;
      this.dthtml = res.data.data[0].content;
      this.dtlogourl = res.data.data[0].cover[0].url;
      console.log("+++++++++++++");
      console.log(this.discList);
      this.ZJList = this.discList;
      this.getAllStory();
      //return Promise.resolve(res.data); //es6新语法，返回一个以给定值解析后的Promise对象
    });
  },
  methods: {
    shiting() {
      this.$Message.info("请从故事列表中选择播放");
    },
    listenAudio(id) {
      var _this = this;
      const url = "http://www.shizilaoba.com/lion/article/query"; //调用自定义的接口
      const data = Object.assign(
        {},
        {
          id: id.id
        }
      );
      axios.post(url, data).then(res => {
        console.log(res.data.data);
        _this.selectItem(res.data.data, id);
      });
    },
    //获取所有故事TODO
    // getAllStory() {
    //   var _this = this;
    //   var listred = [];
    //   for (let k of this.discList) {
    //     const url = "http://www.shizilaoba.com/lion/article/list"; //调用自定义的接口
    //     const data = Object.assign(
    //       {},
    //       {
    //         filter: [{ pid: k.id }]
    //       }
    //     );
    //     axios.post(url, data).then(res => {
    //       //console.log(res.data.data);
    //       k.sound = res.data.data;
    //       //listred.push(res.data.data);
    //       //return Promise.resolve(res.data); //es6新语法，返回一个以给定值解析后的Promise对象
    //     });
    //   }
    //   console.log(_this.ZJList);
    //   //_this.listred=listred
    // },
    getAllStory() {
      var _this = this;
      var listred = this.discList;
      for (let k of listred) {
        const url = "http://www.shizilaoba.com/lion/article/query"; //调用自定义的接口
        const data = Object.assign(
          {},
          {
            id: k.id
          }
        );
        axios.post(url, data).then(res => {
          var litt = [];
          litt.push(res.data.data);
          k.sound = litt;
          console.log(listred);
          _this.ZJList = listred;
          console.log(_this.ZJList);
        });
      }

      //_this.listred=listred
    },
    selectItem(data, id) {
      //debugger

      var mp3 = {};
      mp3.album = data.audio[0].create_time;
      mp3.lyric = data.audio[0].create_time;
      mp3.url = data.audio[0].url;
      mp3.duration = data.audio[0].length;
      mp3.id = data.audio[0].id;
      mp3.image = id.cover[0].url;
      mp3.mid = data.audio[0].id;
      mp3.name = id.title;
      mp3.singer = id.subtitle;

      var num = 0;
      for (let k of this.testMp3) {
        if (k.url == mp3.url) {
          num++;
        }
        console.log(num);
        if (num > 0) {
          return;
        }
      }
      this.indexNum++;
      this.testMp3.push(mp3);
      this.selectPlay({
        list: this.testMp3,
        index: this.indexNum
      });
    },
    ...mapActions(["selectPlay", "randomPlay"]),
    //播放测试
    Playmp3() {
      var _this = this;
      console.log("点击了试听");
      this.$emit("select", _this.testMp3, 0);
    },
    //关闭支付遮罩
    ClosePayBtn() {
      var _this = this;
      _this.ShowPaybtn = false;

      //TODO 处理订单
    },
    //打开支付遮罩
    OpenPayBtn() {
      var _this = this;
      this.$Message.info("购买暂未开放");
      //_this.ShowPaybtn = true;
    },
    //切换详情和故事
    ChangeXQHS() {
      var _this = this;
      if (_this.SwitchXQGS == false) {
        _this.SwitchXQGS = true;
      } else {
        _this.SwitchXQGS = false;
      }
    }
  }
};
</script>

<style>
.detail {
  width: 100%;
  height: 100%;
}
.detail .detail-top {
  width: 100%;
  /* background: red; */
}
.detail .detail-top img {
  width: 100%;
  /* height: 200px; */
}
.detail .detail-top .detail-title {
  width: 90%;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  font-size: 24px;
  border-bottom: 1px solid #dedede;
}
.detail .detail-center {
  width: 90%;
  margin: 20px auto;
}
.detail .detail-center .detail-center-box {
}
.detail .detail-center .detail-center-box-top {
}
.detail .detail-center .detail-center-box-top .detail-center-box-top-left {
  font-size: 24px;
  font-weight: 700;
  width: 50%;
  float: left;
}
.detail .detail-center .detail-center-box-top .detail-center-box-top-right {
  text-align: right;
  width: 50%;
  font-size: 16px;
  color: white;
  float: left;
}
.detail .detail-center .detail-center-box-bottom {
  clear: both;
}
.slide-box {
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

/* 隐藏下方的滚动条 */
.slide-box::-webkit-scrollbar {
  background-color: transparent;
}

.slide-box {
  -ms-overflow-style: none;
}

.slide-box {
  overflow: -moz-scrollbars-none;
}

.slide-item {
  width: 130px;
  height: 190px;
  margin-right: 10px;
  margin-top: 10px;
}
.slide-item img {
  width: 130px;
  height: 130px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.slide-item .slide-item-title {
  height: 25px;
  line-height: 25px;
}
.slide-item .slide-item-money {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  /* color: red; */
}
.detail .detail-center .detail-center-select {
  width: 100%;
  height: 34px;
  line-height: 30px;
  margin: 20px auto;
}
.detail .detail-center .detail-center-select .detail-center-select-left {
  width: 40%;
  margin: 0 5%;
  float: left;
  text-align: center;
  font-size: 18px;
  height: 34px;
}
.detail .detail-center .detail-center-select .detail-center-select-left-click {
  width: 40%;
  margin: 0 5%;
  float: left;
  font-size: 18px;
  text-align: center;
  border-bottom: 4px solid #81cd72;
  height: 30px;
}
.detail .detail-center .detail-center-select .detail-center-select-right {
  width: 40%;
  margin: 0 5%;
  float: left;
  font-size: 18px;
  text-align: center;
  position: relative;
  height: 34px;
}
.detail .detail-center .detail-center-select .detail-center-select-right-click {
  width: 40%;
  margin: 0 5%;
  float: left;
  font-size: 18px;
  text-align: center;
  border-bottom: 4px solid #81cd72;
  position: relative;
  height: 30px;
}
.detail .detail-center .detail-center-select .detail-center-select-num {
  position: absolute;
  right: 20%;
}
.detail .detail-center .detail-center-xq {
}
.detail .detail-center .detail-center-xq img {
  width: 100%;
}
.detail .detail-center .detail-center-gs {
}
.detail .detail-center .detail-center-gs-box {
  clear: both;
}
.detail .detail-center .detail-center-gs-box-left {
  width: 50%;
  height: 60px;
  float: left;
  line-height: 60px;
  font-size: 18px;
  overflow: hidden;
}
.detail .detail-center .detail-center-gs-box-right {
  width: 50%;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: right;
}
.detail .detail-center .detail-center-gs-box-list {
  clear: both;
  overflow: hidden;
  margin-bottom: 10px;
}
.detail
  .detail-center
  .detail-center-gs-box-list
  .detail-center-gs-box-list-left {
  width: 60px;
  height: 60px;

  float: left;
}
.detail
  .detail-center
  .detail-center-gs-box-list
  .detail-center-gs-box-list-center {
  left: 100px;
  right: 70px;
  height: 60px;
  position: absolute;
  border-bottom: 1px solid #dedede;
  /* background: seagreen; */
  float: left;
}
.detail
  .detail-center
  .detail-center-gs-box-list
  .detail-center-gs-box-list-center
  .detail-center-gs-box-list-center-title {
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  font-size: 16px;
}
.detail
  .detail-center
  .detail-center-gs-box-list
  .detail-center-gs-box-list-center
  .detail-center-gs-box-list-center-title2 {
  height: 20px;
}

.detail
  .detail-center
  .detail-center-gs-box-list
  .detail-center-gs-box-list-center
  .detail-center-gs-box-list-center-time {
  height: 20px;
  line-height: 20px;
}
.detail
  .detail-center
  .detail-center-gs-box-list
  .detail-center-gs-box-list-right {
  width: 40px;
  height: 70px;
  /* background: red; */
  position: absolute;
  right: 5%;
}

.detail .detail-bottom {
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
  position: fixed;
  bottom: 0;
  z-index: 500;
  background: white;
  color: #81cd72;
  text-align: center;
}
.detail .detail-bottom .detail-bottom-left {
  width: 49%;
  float: left;
  text-align: center;
  border-right: 1px solid #000;
}
.detail .detail-bottom .detail-bottom-right {
  width: 50%;
  float: left;
  text-align: center;
}

.detail .detail-pay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999;
}
.detail .detail-pay .detail-pay-top {
  height: 50%;
  background: rgba(0, 0, 0, 0.6);
}
.detail .detail-pay .detail-pay-bottom {
  height: 50%;
  background: white;
  color: #000;
}
.detail .detail-pay .detail-pay-bottom .detail-pay-bottom-title {
  height: 40px;
  line-height: 40px;
  width: 90%;
  margin: 0 auto;
  font-size: 24px;
  position: relative;
}
.detail
  .detail-pay
  .detail-pay-bottom
  .detail-pay-bottom-title
  .detail-pay-close {
  z-index: 999;
  left: 5%;
  width: 40px;
  height: 40px;
  position: absolute;
}
.detail
  .detail-pay
  .detail-pay-bottom
  .detail-pay-bottom-title
  .detail-pay-name {
  text-align: center;
  left: 5%;
  right: 5%;
  position: absolute;
}
.detail .detail-pay .detail-pay-bottom .detail-pay-bottom-money {
  width: 90%;
  margin: 20px auto;
  height: 60px;
  line-height: 60px;
}
.detail .detail-pay .detail-pay-bottom .detail-pay-bottom-money .left {
  width: 50%;
  float: left;
  font-size: 22px;
}
.detail .detail-pay .detail-pay-bottom .detail-pay-bottom-money .right {
  width: 50%;
  float: left;
  text-align: right;
  font-size: 22px;
}
.detail .detail-pay .detail-pay-bottom .detail-pay-bottom-paybtn {
  position: absolute;
  bottom: 20px;
  left: 5%;
  right: 5%;
  height: 40px;
  line-height: 40px;
  background: green;
  color: white;
  border-radius: 10px;
  text-align: center;
}
</style>

